<script setup>
import { defineExpose } from 'vue'
import useDialog from '@/hooks/use-dialog'
import { validate50Words, validate20Words, validate200Words } from '@/utils/form-validate'
import { saveParamsMockApi } from '@/api/mock-js/system/params-api'

defineOptions({
  name: 'DialogParams'
})

const modelValue = defineModel({type: Boolean})

const emit = defineEmits(['on-close'])

const formData = reactive({
  id: undefined,
  paramType: 2,
  paramName: '',
  paramKey: '',
  paramValue: '',
  paramValueName: '',
  remarks: ''
})
const {
  formRef,
  title,
  preTitle,
  loadData,
  save,
  saveFlag,
  close,
  setInitData,
  quickSubmit
} = useDialog(emit, formData, modelValue)
defineExpose({
  preTitle, title, formData, setInitData
})
const rules = {
  paramName: {required: true, trigger: 'blur', validator: validate20Words},
  paramKey: {required: true, trigger: 'blur', validator: validate50Words},
  paramValue: {required: true, trigger: 'blur', validator: validate50Words},
  paramValueName: {required: true, trigger: 'blur', validator: validate200Words},
  remarks: {trigger: 'blur', validator: validate200Words}
}
</script>
<template>
  <DialogForm
      :model-value="modelValue"
      :title="`${preTitle}系统字典${title}`"
      :id="formData.id"
      v-model:saveFlag="saveFlag"
      align-center
      width="620px"
      :loading="loadData.loading"
      @on-save="save(saveParamsMockApi,'系统字典')"
      @on-close="close"
      @on-cancel="close"
  >
    <ElForm ref="formRef" :model="formData" v-loading="loadData.loading" :rules="rules" size="large" label-width="90px"
            @keyup.enter.prevent="e=>quickSubmit(e,()=>save(saveParamsMockApi,'系统字典'))">
      <ElRow>
        <ElCol :span="12">
          <ElFormItem label="字典名" prop="paramType">
            <ElRadioGroup v-model="formData.paramType" placeholder="请输入字典名称"
                          :disabled="(formData.paramType===2&&!!formData.id)">
              <ElRadioButton :label="1">系统参数</ElRadioButton>
              <ElRadioButton :label="2">系统字典</ElRadioButton>
            </ElRadioGroup>
          </ElFormItem>
        </ElCol>
      </ElRow>
      <ElRow>
        <ElCol :span="12">
          <ElFormItem label="字典键" prop="paramKey">
            <ElInput v-model="formData.paramKey" placeholder="请输入字典键"/>
          </ElFormItem>
        </ElCol>
        <ElCol :span="12">
          <ElFormItem label="字典键名" prop="paramName">
            <ElInput v-model="formData.paramName" placeholder="请输入字典名称"/>
          </ElFormItem>
        </ElCol>
      </ElRow>
      <ElRow v-if="!formData.id||formData.paramType!==2">
        <ElCol :span="12">
          <ElFormItem label="字典值" prop="paramValue">
            <ElInput v-model="formData.paramValue" placeholder="请输入字典值"/>
          </ElFormItem>
        </ElCol>
        <ElCol :span="12">
          <ElFormItem label="字典值名" prop="paramValueName">
            <ElInput v-model="formData.paramValueName" placeholder="请输入字典值名"/>
          </ElFormItem>
        </ElCol>
        <ElCol :span="24">
          <ElFormItem label="备注" prop="remarks">
            <ElInput type="textarea" rows="1" v-model="formData.remarks"/>
          </ElFormItem>
        </ElCol>
      </ElRow>
    </ElForm>
  </DialogForm>
</template>
